<template>
 <div class="gonglue banxin flex">
     <div class="item">
         <div class="text">
             <h3>签到得积分</h3>
             <div class="btn">去签到</div>
         </div>
     </div>
     <div class="item">
         <div class="text">
             <h3>签到得积分</h3>
             <div class="btn">去签到</div>
         </div>
     </div>
     <div class="item">
         <div class="text">
             <h3>签到得积分</h3>
             <div class="btn">去签到</div>
         </div>
     </div>
     <div class="item">
         <div class="text">
             <h3>签到得积分</h3>
             <div class="btn">去签到</div>
         </div>
     </div>
 </div>
</template>
 
<script>
export default {
 data () {
 return {

 }
 }
}
</script>
 
<style lang = "less" scoped>
 .gonglue {
     justify-content: space-between;
     padding-bottom: 40px;
     .item{
         width: 285px;
         height: 162px;
         background: url('../../assets/images/home/integral-01.png');
         background-size: 100%;
         transition: background-size 0.6s;
         &:hover{
             cursor: pointer;
             background-size: 105%;
         }
         .text{
             margin: 40px 0 0 20px;
             color: #fff;
             h3{
                 font-size: 26px;
             }
             .btn{
                 width: 96px;
                 height: 27px;
                 border: 1px solid #fff;
                 text-align: center;
                 line-height: 27px;
                 margin-top: 20px;
             }
         }
     }
 }
</style>